<template>
    <div>
        <header>
            <van-nav-bar title="搜索药品" left-text="返回" left-arrow @click-left="$router.back()" />
            <div class="search"> <input type="text" pref="searchInput" placeholder="搜索药品" class="search-input" style="width: 570px;height: 60px; border-radius: 26px;border: 3px solid red;
                    margin-left: 30px;margin-top: 20px;padding: 0 20px;" v-model="wc">
            </div>
            <p style="width: 100px;height: 50px;border: none;color: #fe4a29;border-radius: 20px;position: absolute;top: 120px;
                right: 25px; font-weight: bolder;font-size: 30px;" @click="search" class="search-btn">
                搜索</p>
        </header>
        <main class="zhong">
            <h3>最近搜索</h3>
            <div v-for="(item, ind) in gosearch" :key="ind" @click="goToDetail(item.id)">
                <div class="tttl">
                    <p>{{ item.title }}</p>
                </div>
            </div>
            <div class="hotss">
                <h4>热门搜索</h4>
                <p class="p1">消炎镇痛膏</p>
                <p class="p1">关节止痛膏</p>
                <p class="p1">华堂宁</p>
                <p class="p1">米诺迪尔腚</p>
                <p class="p1">他达拉非</p>
                <p class="p1">百乐眠</p>
            </div>
        </main>
        <footer>
            <div>
                <img src="../../assets/shopimg/sss_03.png" alt=""
                    style="width: 750px;height: 750px;margin-top: 30px;padding: 20px;">
            </div>
        </footer>

    </div>
</template>
<script lang="ts" setup>
import "./index.css"
import http from "../../utils/http";
import { ref } from "vue";
import router from "@/router";

const gosearch = ref([])


const getsearch = async () => {
    await http.get("/api/shop").then((res) => {
        gosearch.value = res.data
        // console.log(res.data.data.data);
    })
}


const goToDetail = async (id: string) => {
    router.push({ path: '/shopdetail/index.vue', query: { id: id } })
}
getsearch()
const wc = ref("")
const search = async (value: string) => {
    await http.get("/api/shop", { params: { title: wc.value } }).then((res) => {
        gosearch.value = res.data.data
        console.log(res.data.data);
    })
}
</script>